﻿<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="innerLabelPie">
            <ng-template #innerLabelPie>
                饼图
                <small class="text-sm font-weight-normal">基础饼图 - 文本在外围显示</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <x-pie url="/api/pie"></x-pie>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="outLabelPie">
            <ng-template #outLabelPie>
                饼图
                <small class="text-sm font-weight-normal">基础饼图 - 文本在内部显示</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <x-pie url="/api/pie" [isInnerLabel]="true"></x-pie>
            </v-chart>
        </nz-card>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="basicDonut">
            <ng-template #basicDonut>
                环图
                <small class="text-sm font-weight-normal">基础环图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <x-pie url="/api/pie" isDonut="true"></x-pie>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="basicDonut2">
            <ng-template #basicDonut2>
                环图
                <small class="text-sm font-weight-normal">基础环图 - 空心圆半径变小</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <v-axis></v-axis>
                <x-pie url="/api/pie" isDonut="true" innerRadius="0.2"></x-pie>
            </v-chart>
        </nz-card>
    </div>
</div>
<div nz-row nzGutter="16">
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="rosePie">
            <ng-template #rosePie>
                饼图
                <small class="text-sm font-weight-normal">南丁格尔玫瑰图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <x-rose-pie url="/api/pie/rose"></x-rose-pie>
            </v-chart>
        </nz-card>
    </div>
    <div nz-col nzXs="24" nzMd="12">
        <nz-card [nzBordered]="false" [nzTitle]="roseDonut">
            <ng-template #roseDonut>
                环图
                <small class="text-sm font-weight-normal">南丁格尔玫瑰环图</small>
            </ng-template>
            <v-chart [forceFit]="true" [height]="275">
                <v-tooltip></v-tooltip>
                <x-rose-pie url="/api/pie/rose" isDonut="true" legendPosition="left" legendOffsetX="140"></x-rose-pie>
            </v-chart>
        </nz-card>
    </div>
</div>